<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="format-detection" content="telephone=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="icon" href="/images/icons/favicon-16x16.png?v=2.8.0" type="image/png" sizes="16x16"><link rel="icon" href="/images/icons/favicon-32x32.png?v=2.8.0" type="image/png" sizes="32x32"><meta name="description" content="如何搭建个人博客网站        作为程序员，如果你喜欢输出技术文章的话，一定有过搭建个人博客网站的想法。对比了好多博客框架之后，我发现Hexo+hexo-theme-stun主题搭建的博客网站，不仅界面漂亮，而且功能强大。今天带大家使用Hexo搭建一个靓丽的博客网站，希望对大家有所帮助！                      Hexo简介">
<meta property="og:type" content="article">
<meta property="og:title" content="blog网站搭建">
<meta property="og:url" content="https://lou_jianyang.gitee.io/2023/01/19/%E5%A6%82%E4%BD%95%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/index.html">
<meta property="og:site_name" content="ljyxsg的技术成长录">
<meta property="og:description" content="如何搭建个人博客网站        作为程序员，如果你喜欢输出技术文章的话，一定有过搭建个人博客网站的想法。对比了好多博客框架之后，我发现Hexo+hexo-theme-stun主题搭建的博客网站，不仅界面漂亮，而且功能强大。今天带大家使用Hexo搭建一个靓丽的博客网站，希望对大家有所帮助！                      Hexo简介">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://lou_jianyang.gitee.io/2023/01/19/%E5%A6%82%E4%BD%95%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/stun_view.blog-build1.png">
<meta property="og:image" content="https://lou_jianyang.gitee.io/2023/01/19/%E5%A6%82%E4%BD%95%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/hexo_start_01.blog-build2.png">
<meta property="og:image" content="https://lou_jianyang.gitee.io/2023/01/19/%E5%A6%82%E4%BD%95%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/stun_intro.blog-build3.png">
<meta property="og:image" content="https://lou_jianyang.gitee.io/2023/01/19/%E5%A6%82%E4%BD%95%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/page.blog-build4.png">
<meta property="og:image" content="https://lou_jianyang.gitee.io/2023/01/19/%E5%A6%82%E4%BD%95%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/directory.blog-build5.jpeg">
<meta property="og:image" content="https://lou_jianyang.gitee.io/2023/01/19/%E5%A6%82%E4%BD%95%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/ljyxsg-blog.build6.png">
<meta property="og:image" content="https://lou_jianyang.gitee.io/2023/01/19/%E5%A6%82%E4%BD%95%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/gitee_page.build7.png">
<meta property="og:image" content="https://lou_jianyang.gitee.io/2023/01/19/%E5%A6%82%E4%BD%95%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/open.build8.png">
<meta property="og:image" content="https://lou_jianyang.gitee.io/2023/01/19/%E5%A6%82%E4%BD%95%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/open.build9.png">
<meta property="og:image" content="https://lou_jianyang.gitee.io/2023/01/19/%E5%A6%82%E4%BD%95%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/publish1.build10.png">
<meta property="og:image" content="https://lou_jianyang.gitee.io/2023/01/19/%E5%A6%82%E4%BD%95%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/publish2.build11.png">
<meta property="article:published_time" content="2023-01-19T03:29:41.000Z">
<meta property="article:modified_time" content="2023-02-10T01:56:55.089Z">
<meta property="article:author" content="ljyxsg">
<meta property="article:tag" content="网站搭建">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://lou_jianyang.gitee.io/2023/01/19/%E5%A6%82%E4%BD%95%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/stun_view.blog-build1.png"><title>blog网站搭建 | ljyxsg的技术成长录</title><link ref="canonical" href="https://lou_jianyang.gitee.io/2023/01/19/%E5%A6%82%E4%BD%95%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/"><link rel="dns-prefetch" href="https://cdn.jsdelivr.net"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12.1/css/all.min.css" type="text/css"><link rel="stylesheet" href="/css/index.css?v=2.8.0"><link rel="stylesheet" href="css/custom.css"><script>var Stun = window.Stun || {};
var CONFIG = {
  root: '/',
  algolia: undefined,
  assistSearch: undefined,
  fontIcon: {"prompt":{"success":"fas fa-check-circle","info":"fas fa-arrow-circle-right","warning":"fas fa-exclamation-circle","error":"fas fa-times-circle"},"copyBtn":"fas fa-copy"},
  sidebar: {"offsetTop":"20px","tocMaxDepth":6},
  header: {"enable":true,"showOnPost":true,"scrollDownIcon":false},
  postWidget: {"endText":true},
  nightMode: {"enable":true},
  back2top: {"enable":true},
  codeblock: {"style":"default","highlight":"light","wordWrap":false},
  reward: false,
  fancybox: false,
  zoomImage: {"gapAside":"20px"},
  galleryWaterfall: undefined,
  lazyload: false,
  pjax: undefined,
  externalLink: {"icon":{"enable":true,"name":"fas fa-external-link-alt"}},
  shortcuts: undefined,
  prompt: {"copyButton":"复制","copySuccess":"复制成功","copyError":"复制失败"},
  sourcePath: {"js":"js","css":"css","images":"images"},
};

window.CONFIG = CONFIG;</script><meta name="generator" content="Hexo 6.3.0"></head><body><div class="container" id="container"><header class="header" id="header"><div class="header-inner"><nav class="header-nav header-nav--fixed"><div class="header-nav-inner"><div class="header-nav-menubtn"><i class="fas fa-bars"></i></div><div class="header-nav-menu"><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/"><span class="header-nav-menu-item__icon"><i class="fas fa-home"></i></span><span class="header-nav-menu-item__text">首页</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/archives/"><span class="header-nav-menu-item__icon"><i class="fas fa-folder-open"></i></span><span class="header-nav-menu-item__text">归档</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/categories/"><span class="header-nav-menu-item__icon"><i class="fas fa-layer-group"></i></span><span class="header-nav-menu-item__text">分类</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/tags/"><span class="header-nav-menu-item__icon"><i class="fas fa-tags"></i></span><span class="header-nav-menu-item__text">标签</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/about/"><span class="header-nav-menu-item__icon"><i class="fas fa-address-card"></i></span><span class="header-nav-menu-item__text">关于</span></a></div></div><div class="header-nav-mode"><div class="mode"><div class="mode-track"><span class="mode-track-moon"></span><span class="mode-track-sun"></span></div><div class="mode-thumb"></div></div></div></div></nav><div class="header-banner"><div class="header-banner-info"><div class="header-banner-info__title">ljyxsg的技术成长录</div><div class="header-banner-info__subtitle">亿点点nice的ljy</div></div></div></div></header><main class="main" id="main"><div class="main-inner"><div class="content-wrap" id="content-wrap"><div class="content" id="content"><!-- Just used to judge whether it is an article page--><div id="is-post"></div><div class="post"><header class="post-header"><h1 class="post-title">blog网站搭建</h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2023-01-19</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2023-02-10</span></span></div></header><div class="post-body"><hr>

        <h2 id="如何搭建个人博客网站"   >
          <a href="#如何搭建个人博客网站" class="heading-link"><i class="fas fa-link"></i></a><a href="#如何搭建个人博客网站" class="headerlink" title="如何搭建个人博客网站"></a>如何搭建个人博客网站</h2>
      <blockquote>
<p>作为程序员，如果你喜欢输出技术文章的话，一定有过搭建个人博客网站的想法。对比了好多博客框架之后，我发现Hexo+<code>hexo-theme-stun</code>主题搭建的博客网站，不仅界面漂亮，而且功能强大。今天带大家使用Hexo搭建一个靓丽的博客网站，希望对大家有所帮助！</p>
</blockquote>

        <h2 id="Hexo简介"   >
          <a href="#Hexo简介" class="heading-link"><i class="fas fa-link"></i></a><a href="#Hexo简介" class="headerlink" title="Hexo简介"></a>Hexo简介</h2>
      <p>Hexo是一个快速、简洁且高效的博客框架。我们可以使用Markdown写文章，然后通过Hexo生成静态网站，Hexo的主题非常丰富，很多你见过的博客都是用它生成的。</p>

        <h2 id="hexo-theme-stun主题"   >
          <a href="#hexo-theme-stun主题" class="heading-link"><i class="fas fa-link"></i></a><a href="#hexo-theme-stun主题" class="headerlink" title="hexo-theme-stun主题"></a>hexo-theme-stun主题</h2>
      <p>使用Hexo时，我们一般会搭配第三方主题来使用，这里推荐一款基于Material Design设计的主题<code>hexo-theme-stun</code>，界面简单漂亮，文章内容美观易读。响应式设计，博客在桌面端、平板、手机等设备上均能很好的展现。内置丰富插件，功能强大。</p>

        <h2 id="演示效果"   >
          <a href="#演示效果" class="heading-link"><i class="fas fa-link"></i></a><a href="#演示效果" class="headerlink" title="演示效果"></a>演示效果</h2>
      <p>我们先来看下效果，效果还是很不错的，想搭建个人博客的朋友可以试下！</p>
<!-- ![stun_view.blog-build1](uploads\project\project\stun_view.blog-build1.png) -->
<img src="/2023/01/19/%E5%A6%82%E4%BD%95%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/stun_view.blog-build1.png" class="" title="stun_view.blog-build1">


        <h2 id="搭建"   >
          <a href="#搭建" class="heading-link"><i class="fas fa-link"></i></a><a href="#搭建" class="headerlink" title="搭建"></a>搭建</h2>
      <blockquote>
<p>我们将先使用Hexo搭建一个基本的博客网站，然后切换到<code>hexo-theme-stun</code>主题。</p>
</blockquote>
<ul>
<li>首先使用如下命令安装<code>hexo-cli</code>，看名字就知道是Hexo的CLI工具；</li>
</ul>
<figure class="highlight sh"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g hexo-cli</span><br></pre></td></tr></table></div></figure>

<ul>
<li>安装成功后初始化一个博客目录，并进入该目录，然后安装依赖；</li>
</ul>
<figure class="highlight sh"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 初始化博客目录</span></span><br><span class="line">hexo init website-hexo</span><br><span class="line"><span class="comment"># 进入博客目录</span></span><br><span class="line"><span class="built_in">cd</span> website-hexo</span><br><span class="line"><span class="comment"># 安装博客相关依赖</span></span><br><span class="line">npm install</span><br><span class="line"></span><br></pre></td></tr></table></div></figure>

<ul>
<li>这样一个基本的博客网站就搭建完毕了，是不是秒建博客网站，然后使用如下命令启动博客网站;</li>
</ul>
<figure class="highlight sh"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">hexo s</span><br><span class="line"></span><br></pre></td></tr></table></div></figure>

<ul>
<li>启动成功后我们可以访问下主页，用过Hexo的朋友应该知道，Hexo要搭配主题来使用，否则真的很丑，访问地址：<span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="http://localhost:4000/" >http://localhost:4000/</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></li>
</ul>
<!-- <img src = "..\uploads\project\hexo_start_01.blog-build2.png"> -->
<!-- ![hexo_start_01.blog-build2](uploads\project\hexo_start_01.blog-build2.png) -->
<img src="/2023/01/19/%E5%A6%82%E4%BD%95%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/hexo_start_01.blog-build2.png" class="" title="hexo_start_01.blog-build2">


        <h2 id="配置"   >
          <a href="#配置" class="heading-link"><i class="fas fa-link"></i></a><a href="#配置" class="headerlink" title="配置"></a>配置</h2>
      <blockquote>
<p>搭建博客网站，有些配置需要自定义，接下来我们来讲下Hexo的整体配置和<code>hexo-theme-stun</code>的主题配置。</p>
</blockquote>

        <h3 id="Hexo整体配置"   >
          <a href="#Hexo整体配置" class="heading-link"><i class="fas fa-link"></i></a><a href="#Hexo整体配置" class="headerlink" title="Hexo整体配置"></a>Hexo整体配置</h3>
      <blockquote>
<p>支持Hexo的主题有很多，这里选择了我认为比较漂亮的一个<code>hexo-theme-stun</code>。</p>
</blockquote>

        <h3 id="1-首先下载主题"   >
          <a href="#1-首先下载主题" class="heading-link"><i class="fas fa-link"></i></a><a href="#1-首先下载主题" class="headerlink" title="1.首先下载主题"></a>1.首先下载主题</h3>
      <p>  解压到项目的<code>themes</code>目录下，下载地址：<span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://github.com/liuyib/hexo-theme-stun" >https://github.com/liuyib/hexo-theme-stun</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>
<!-- <img src = "..\uploads\project\stun_intro.blog-build3.png"> -->
<!-- ![stun_intro.blog-build3](uploads\project\stun_intro.blog-build3.png) -->
<img src="/2023/01/19/%E5%A6%82%E4%BD%95%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/stun_intro.blog-build3.png" class="" title="stun_intro.blog-build3">


        <h3 id="2-修改项目根目录下的配置文件-config-yml"   >
          <a href="#2-修改项目根目录下的配置文件-config-yml" class="heading-link"><i class="fas fa-link"></i></a><a href="#2-修改项目根目录下的配置文件-config-yml" class="headerlink" title="2.修改项目根目录下的配置文件_config.yml"></a>2.修改项目根目录下的配置文件<code>_config.yml</code></h3>
      <p>  该文件为Hexo的整体配置，将<code>theme</code>属性改为<code>hexo-theme-stun</code>；</p>
<figure class="highlight sh"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">theme: hexo-theme-stun</span><br></pre></td></tr></table></div></figure>


        <h3 id="3-添加网站、网址和首页配置"   >
          <a href="#3-添加网站、网址和首页配置" class="heading-link"><i class="fas fa-link"></i></a><a href="#3-添加网站、网址和首页配置" class="headerlink" title="3.添加网站、网址和首页配置"></a>3.添加网站、网址和首页配置</h3>
      <p>  <code>_config.yml</code>文件不仅可以改主题，很多网站配置也可以更改，比如网站配置、网址配置、首页配置等。</p>
<figure class="highlight sh"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 网站配置</span></span><br><span class="line">title: ljyxsg的技术成长录</span><br><span class="line">subtitle: <span class="string">&#x27;ljyxsg的技术成长录&#x27;</span></span><br><span class="line">description: <span class="string">&#x27;以技能为导向的工作态度、以兴趣为导向的人际交流&#x27;</span></span><br><span class="line">keywords: ljyxsg的技术成长录</span><br><span class="line">author: ljyxsg</span><br><span class="line">language: zh-CN</span><br><span class="line">timezone: <span class="string">&#x27;Asia/Shanghai&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 网址配置</span></span><br><span class="line">url: http://ljyxsg.github.io</span><br><span class="line">permalink: :year/:month/:day/:title/</span><br><span class="line"></span><br><span class="line"><span class="comment"># 首页配置</span></span><br><span class="line">index_generator:</span><br><span class="line">  path: <span class="string">&#x27;&#x27;</span></span><br><span class="line">  per_page: 10</span><br><span class="line">  order_by: -<span class="built_in">date</span></span><br><span class="line">  </span><br><span class="line"><span class="comment"># 分页配置</span></span><br><span class="line">per_page: 10</span><br><span class="line">pagination_dir: page</span><br></pre></td></tr></table></div></figure>

        <h3 id="4-添加部署路径"   >
          <a href="#4-添加部署路径" class="heading-link"><i class="fas fa-link"></i></a><a href="#4-添加部署路径" class="headerlink" title="4.添加部署路径"></a>4.添加部署路径</h3>
      <p>  打开根目录下的_config.yml,将部署路径设置为自己的gitee仓库地址</p>
<figure class="highlight plaintext"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">deploy:</span><br><span class="line">  type: git</span><br><span class="line">  repo: https://gitee.com/lou_jianyang/lou_jianyang.git</span><br><span class="line">  branch: master</span><br></pre></td></tr></table></div></figure>

        <h3 id="5-设置首页的背景图和文字"   >
          <a href="#5-设置首页的背景图和文字" class="heading-link"><i class="fas fa-link"></i></a><a href="#5-设置首页的背景图和文字" class="headerlink" title="5.设置首页的背景图和文字"></a>5.设置首页的背景图和文字</h3>
      <p>  修改_config.stun.yml文件</p>
<figure class="highlight plaintext"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">header:</span><br><span class="line">  enable: true</span><br><span class="line">  show_on:</span><br><span class="line">    post: true</span><br><span class="line">  height: 80%</span><br><span class="line">  # 将背景图的状态设置true</span><br><span class="line">  bg_image:</span><br><span class="line">    enable: true</span><br><span class="line">    # 如果在theme路径下设置背景图片(source/images): /images/avatar.png</span><br><span class="line">    # 如果在source路径下设置背景图片(source/uploads): /uploads/avatar.png</span><br><span class="line">    url: /uploads/dog.jpg</span><br><span class="line">  banner:</span><br><span class="line">    # 将banner的编辑状态打开</span><br><span class="line">    enable: true</span><br><span class="line">    # 设置博客的标题</span><br><span class="line">    title: ljyxsg的技术成长录</span><br><span class="line">    # 设置博客的副标题</span><br><span class="line">    subtitle: 亿点点nice的ljy</span><br><span class="line">  # 为博客打开阴影并添加阴影度</span><br><span class="line">  mask:</span><br><span class="line">    enable: true</span><br><span class="line">    # mask值范围: 0 ~ 1)</span><br><span class="line">    opacity: 0.5</span><br></pre></td></tr></table></div></figure>

        <h2 id="添加固定页面"   >
          <a href="#添加固定页面" class="heading-link"><i class="fas fa-link"></i></a><a href="#添加固定页面" class="headerlink" title="添加固定页面"></a>添加固定页面</h2>
      <ul>
<li>在首页顶部有一些导航按钮，如标签、分类、归档等，如果我们没创建对应页面的话，会无法访问；<!-- <img src = "..\uploads\project\page.blog-build4.png"> -->
<!-- ![page.blog-build4](uploads\project\page.blog-build4.png) -->
<img src="/2023/01/19/%E5%A6%82%E4%BD%95%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/page.blog-build4.png" class="" title="page.blog-build4"></li>
<li>使用<code>hexo new page &quot;categories&quot;</code>命令新建分类页，分类页至少包含如下内容<figure class="highlight sh"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: categories</span><br><span class="line"><span class="built_in">date</span>: 2023-01-19 15:28:49</span><br><span class="line"><span class="built_in">type</span>: <span class="string">&quot;categories&quot;</span></span><br><span class="line">layout: <span class="string">&quot;categories&quot;</span></span><br><span class="line">---</span><br></pre></td></tr></table></div></figure></li>
<li>使用<code>hexo new page &quot;tags&quot;</code>命令新建分类页，分类页至少包含如下内容</li>
</ul>
<figure class="highlight sh"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: tags</span><br><span class="line"><span class="built_in">date</span>: 2021-09-06 10:25:04</span><br><span class="line"><span class="built_in">type</span>: <span class="string">&quot;tags&quot;</span></span><br><span class="line">layout: <span class="string">&quot;tags&quot;</span></span><br><span class="line">---</span><br></pre></td></tr></table></div></figure>

<ul>
<li>使用<code>hexo new page &quot;about&quot;</code>命令新建关于页，关于页至少包含如下内容；</li>
</ul>
<figure class="highlight sh"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: about</span><br><span class="line"><span class="built_in">date</span>: 2021-09-06 10:28:56</span><br><span class="line"><span class="built_in">type</span>: <span class="string">&quot;about&quot;</span></span><br><span class="line">layout: <span class="string">&quot;about&quot;</span></span><br><span class="line">---</span><br></pre></td></tr></table></div></figure>
<ul>
<li>页面都创建成功后，项目目录结构如下，这里贴下目录，方便大家理解。<!-- <img src = "..\uploads\project\directory.blog-build5.jpeg"> -->
<!-- ![directory.blog-build5](uploads\project\directory.blog-build5.jpeg) -->
<img src="/2023/01/19/%E5%A6%82%E4%BD%95%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/directory.blog-build5.jpeg" class="" title="directory.blog-build5"></li>
</ul>

        <h2 id="修改网站的一些基础配置"   >
          <a href="#修改网站的一些基础配置" class="heading-link"><i class="fas fa-link"></i></a><a href="#修改网站的一些基础配置" class="headerlink" title="修改网站的一些基础配置"></a>修改网站的一些基础配置</h2>
      
        <h2 id="编写文章"   >
          <a href="#编写文章" class="heading-link"><i class="fas fa-link"></i></a><a href="#编写文章" class="headerlink" title="编写文章"></a>编写文章</h2>
      <p>  在编写文章前将 <code>_config.yml</code>文件中的<code>post_asset_folder</code>设置为<code>true</code>。</p>
<figure class="highlight plaintext"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo n &#x27;我的第一篇博客&#x27;</span><br></pre></td></tr></table></div></figure>
<p>  在<code>source/_posts</code>目录下生成<code>我的第一篇博客.md</code>的同时也会生成一个<code>我的第一篇博客</code>文件夹,可以把文章中的图片放在该文件夹下。<br>使用markdown的语法编辑博客页面,具体语法详情可见<span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://markdown.com.cn/cheat-sheet.html" >markdown语法链接</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span>。<br>  要注意的是hexo3.0版本后推荐使用以下语法插入图片:</p>
<figure class="highlight plaintext"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% asset_img example.jpeg this is an example! %&#125;</span><br></pre></td></tr></table></div></figure>
<p>  写完文章后运行以下命令，将博客代码上传到gitee</p>
<figure class="highlight plaintext"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">hexo clean &amp; hexo g </span><br><span class="line">hexo d</span><br></pre></td></tr></table></div></figure>
<img src="/2023/01/19/%E5%A6%82%E4%BD%95%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/ljyxsg-blog.build6.png" class="" title="ljyxsg-blog.build6">


        <h2 id="将博客项目生成Gitee-Page"   >
          <a href="#将博客项目生成Gitee-Page" class="heading-link"><i class="fas fa-link"></i></a><a href="#将博客项目生成Gitee-Page" class="headerlink" title="将博客项目生成Gitee Page"></a>将博客项目生成Gitee Page</h2>
      <ol>
<li>注意，需要将项目的名称和仓库名称设置为相同，这样码云的域名后面不需要加额外的路径。<img src="/2023/01/19/%E5%A6%82%E4%BD%95%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/gitee_page.build7.png" class="" title="gitee_page.build7">
  在博客项目页面选择<code>服务</code> -&gt; <code>Gitee Pages</code>,第一次开通需要输入身份证信息，大约在两个工作日能够审核成功。</li>
<li>审核成功后，就可以发布博客页面，不过在这之前需要将项目设置为开源，操作如下图所示:<br>  <code>管理</code> -&gt; <code>选择开源</code> -&gt; <code>勾选我同意</code> -&gt; <code>点击确定</code><img src="/2023/01/19/%E5%A6%82%E4%BD%95%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/open.build8.png" class="" title="open.build8">
<img src="/2023/01/19/%E5%A6%82%E4%BD%95%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/open.build9.png" class="" title="open.build9"></li>
<li>点击 <code>管理</code> -&gt; <code>选择分支</code> -&gt; <code>强制https</code> -&gt; <code>更新</code> -&gt; <code>点击链接</code> 可以跳转到博客页面。<img src="/2023/01/19/%E5%A6%82%E4%BD%95%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/publish1.build10.png" class="" title="publish1.build10">
<img src="/2023/01/19/%E5%A6%82%E4%BD%95%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/publish2.build11.png" class="" title="publish2.build11"></li>
</ol>
</div><footer class="post-footer"><div class="post-ending ending"><div class="ending__text">------ 本文结束，感谢您的阅读 ------</div></div><div class="post-copyright copyright"><div class="copyright-author"><span class="copyright-author__name">本文作者: </span><span class="copyright-author__value"><a href="https://lou_jianyang.gitee.io">ljyxsg</a></span></div><div class="copyright-link"><span class="copyright-link__name">本文链接: </span><span class="copyright-link__value"><a href="https://lou_jianyang.gitee.io/2023/01/19/%E5%A6%82%E4%BD%95%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/">https://lou_jianyang.gitee.io/2023/01/19/%E5%A6%82%E4%BD%95%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/</a></span></div><div class="copyright-notice"><span class="copyright-notice__name">版权声明: </span><span class="copyright-notice__value">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en" rel="external nofollow" target="_blank">BY-NC-SA</a> 许可协议。转载请注明出处！</span></div></div><div class="post-tags"><span class="post-tags-item"><span class="post-tags-item__icon"><i class="fas fa-tag"></i></span><a class="post-tags-item__link" href="https://lou_jianyang.gitee.io/tags/%E7%BD%91%E7%AB%99%E6%90%AD%E5%BB%BA/">网站搭建</a></span></div><nav class="post-paginator paginator"><div class="paginator-prev"><a class="paginator-prev__link" href="/2023/01/27/webservice%E6%A1%86%E6%9E%B6jersey/"><span class="paginator-prev__icon"><i class="fas fa-angle-left"></i></span><span class="paginator-prev__text">webservice框架jersey</span></a></div></nav></footer></div></div></div><div class="sidebar-wrap" id="sidebar-wrap"><aside class="sidebar" id="sidebar"><div class="sidebar-nav"><span class="sidebar-nav-toc current">文章目录</span><span class="sidebar-nav-ov">站点概览</span></div><section class="sidebar-toc"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A6%82%E4%BD%95%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99"><span class="toc-number">1.</span> <span class="toc-text">
          如何搭建个人博客网站</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Hexo%E7%AE%80%E4%BB%8B"><span class="toc-number">2.</span> <span class="toc-text">
          Hexo简介</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#hexo-theme-stun%E4%B8%BB%E9%A2%98"><span class="toc-number">3.</span> <span class="toc-text">
          hexo-theme-stun主题</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%BC%94%E7%A4%BA%E6%95%88%E6%9E%9C"><span class="toc-number">4.</span> <span class="toc-text">
          演示效果</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%90%AD%E5%BB%BA"><span class="toc-number">5.</span> <span class="toc-text">
          搭建</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%85%8D%E7%BD%AE"><span class="toc-number">6.</span> <span class="toc-text">
          配置</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Hexo%E6%95%B4%E4%BD%93%E9%85%8D%E7%BD%AE"><span class="toc-number">6.1.</span> <span class="toc-text">
          Hexo整体配置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E9%A6%96%E5%85%88%E4%B8%8B%E8%BD%BD%E4%B8%BB%E9%A2%98"><span class="toc-number">6.2.</span> <span class="toc-text">
          1.首先下载主题</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E4%BF%AE%E6%94%B9%E9%A1%B9%E7%9B%AE%E6%A0%B9%E7%9B%AE%E5%BD%95%E4%B8%8B%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6-config-yml"><span class="toc-number">6.3.</span> <span class="toc-text">
          2.修改项目根目录下的配置文件_config.yml</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E6%B7%BB%E5%8A%A0%E7%BD%91%E7%AB%99%E3%80%81%E7%BD%91%E5%9D%80%E5%92%8C%E9%A6%96%E9%A1%B5%E9%85%8D%E7%BD%AE"><span class="toc-number">6.4.</span> <span class="toc-text">
          3.添加网站、网址和首页配置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E6%B7%BB%E5%8A%A0%E9%83%A8%E7%BD%B2%E8%B7%AF%E5%BE%84"><span class="toc-number">6.5.</span> <span class="toc-text">
          4.添加部署路径</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-%E8%AE%BE%E7%BD%AE%E9%A6%96%E9%A1%B5%E7%9A%84%E8%83%8C%E6%99%AF%E5%9B%BE%E5%92%8C%E6%96%87%E5%AD%97"><span class="toc-number">6.6.</span> <span class="toc-text">
          5.设置首页的背景图和文字</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B7%BB%E5%8A%A0%E5%9B%BA%E5%AE%9A%E9%A1%B5%E9%9D%A2"><span class="toc-number">7.</span> <span class="toc-text">
          添加固定页面</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BF%AE%E6%94%B9%E7%BD%91%E7%AB%99%E7%9A%84%E4%B8%80%E4%BA%9B%E5%9F%BA%E7%A1%80%E9%85%8D%E7%BD%AE"><span class="toc-number">8.</span> <span class="toc-text">
          修改网站的一些基础配置</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BC%96%E5%86%99%E6%96%87%E7%AB%A0"><span class="toc-number">9.</span> <span class="toc-text">
          编写文章</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B0%86%E5%8D%9A%E5%AE%A2%E9%A1%B9%E7%9B%AE%E7%94%9F%E6%88%90Gitee-Page"><span class="toc-number">10.</span> <span class="toc-text">
          将博客项目生成Gitee Page</span></a></li></ol></section><!-- ov = overview--><section class="sidebar-ov hide"><div class="sidebar-ov-author"><div class="sidebar-ov-author__avatar"><img class="sidebar-ov-author__avatar_img" src="/images/icons/stun-logo.svg" alt="avatar"></div><p class="sidebar-ov-author__text">Hello Stun</p></div><div class="sidebar-ov-state"><a class="sidebar-ov-state-item sidebar-ov-state-item--posts" href="/archives/"><div class="sidebar-ov-state-item__count">15</div><div class="sidebar-ov-state-item__name">归档</div></a><a class="sidebar-ov-state-item sidebar-ov-state-item--categories" href="/categories/"><div class="sidebar-ov-state-item__count">9</div><div class="sidebar-ov-state-item__name">分类</div></a><a class="sidebar-ov-state-item sidebar-ov-state-item--tags" href="/tags/"><div class="sidebar-ov-state-item__count">2</div><div class="sidebar-ov-state-item__name">标签</div></a></div><div class="sidebar-ov-cc"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en" target="_blank" rel="noopener" data-popover="知识共享许可协议" data-popover-pos="up"><img src="/images/cc-by-nc-sa.svg"></a></div></section><div class="sidebar-reading"><div class="sidebar-reading-info"><span class="sidebar-reading-info__text">你已阅读了 </span><span class="sidebar-reading-info__num">0</span><span class="sidebar-reading-info__perc">%</span></div><div class="sidebar-reading-line"></div></div></aside></div><div class="clearfix"></div></div></main><footer class="footer" id="footer"><div class="footer-inner"><div><span>Copyright © 2023</span><span class="footer__icon"><i class="fas fa-heart"></i></span><span>ljyxsg</span></div><div><span>由 <a href="http://hexo.io/" title="Hexo" target="_blank" rel="noopener">Hexo</a> 强力驱动</span><span> v6.3.0</span><span class="footer__devider">|</span><span>主题 - <a href="https://github.com/liuyib/hexo-theme-stun/" title="Stun" target="_blank" rel="noopener">Stun</a></span><span> v2.8.0</span></div></div></footer><div class="loading-bar" id="loading-bar"><div class="loading-bar__progress"></div></div><div class="back2top" id="back2top"><span class="back2top__icon"><i class="fas fa-rocket"></i></span></div></div><script src="https://cdn.jsdelivr.net/npm/jquery@v3.4.1/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.ui.min.js"></script><script src="/js/utils.js?v=2.8.0"></script><script src="/js/stun-boot.js?v=2.8.0"></script><script src="/js/scroll.js?v=2.8.0"></script><script src="/js/header.js?v=2.8.0"></script><script src="/js/sidebar.js?v=2.8.0"></script></body></html>